昨天接觸到了表格 ( table )，既然有表格呈現資料，那也會需要表單 ( form ) 來呈現資料囉，所以今天的主題是表單 ( form )。

表單 Form

主要

<form>
表單的外框，裡面裝輸入的欄位

<label>

• 輸入框前的文字說明 ( 綁訂到對應輸入框 )
• 後面加上 for=”id 名稱” → 配對<input>

<button>
按鈕：送出資料

1.輸入 <input>

• 單行文字 text

<input type="text" name="username" placeholder="輸入名字">

• 密碼 password

<input type="password" name="password" placeholder="輸入密碼"

• 數字 number

<input type="number" name="age" min="0" max="120">

• 電子郵件 email

<input type="email" name="email" placeholder="輸入信箱">

• 日期 / 時間 date

<input type="date" name="birthday">
<input type="time" name="meal_time"

2.多行文字

• 文字區域

<textarea name="notes" rows="4" cols="40" placeholder="填寫備註"></textarea>

3.選擇類

• 單選按鈕（Radio）：只能選一個

<label>運動：</label>
<input type="radio" name="exercise" value="yes"> 有
<input type="radio" name="exercise" value="no"> 沒有

• 下拉選單（Select / Option）：只能選一個

<select name="medication">
    <option value="yes">有</option>
    <option value="no">沒有</option>
</select>

• 多選方塊（Checkbox）：可以選多個

<label>飲食偏好：</label>
<input type="checkbox" name="food" value="rice"> 米飯
<input type="checkbox" name="food" value="noodles"> 麵食

4.其他特殊輸入

• 送出按鈕

<input type="submit" value="送出">

• 重置按鈕

<input type="reset" value="清空">

• 隱藏欄位（後端用）

<input type="hidden" name="userId" value="12345">

• 檔案上傳

<input type="file" name="avatar">

實作部分

程式碼

預覽頁面

結尾

目前沒有CSS，所以還醜醜。CSS會在功能比較齊全時研究。

有機會寫到 JavaScripts的話，會嘗試將表單與表格連結，這樣邏輯比較合理，填寫完表單轉跳到表格檢視。